<template>
	<view class="banner">
		<view class="top">
			<image class="top_img"
				src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/fbaf030b9f044fd0a65e15d459020245s2z6yc3f0o.png"
				mode="widthFix"></image>
			<!-- <view class="title">
				曼德呵护
			</view> -->
			<view class="title"></view>
		</view>
		<view v-if="isSeach" class="search_container">
			<u-input class="input" v-model="keyword" border="" type="text" placeholder="输入您想查询的商品名称"
				placeholder-style='color: #f86853' :customStyle="{ ...iptStyle }">
				<template slot="suffix">
					<view class="suffixStyle">
						<u-icon @click="handleSubmit" color="" size="45" name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/18/f3e308b3d3314f3a9c58765d5faa7e30lah9rt6fli.png" color="#fff"></u-icon>
					</view>
				</template>
			</u-input>
		</view>
		<view class="info">
			<view @click="handleWechat" class="info1">
				微信公众号:曼德呵护科技
				<u-icon  size="32"  name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/2394f318ac7a4e56b32cd2c654359cd6agde40fe0x.png"></u-icon>
			</view>
			<view @click="handlePhone" class="info1">
				联系方式:19357569679
				<u-icon size="28" name="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/19/5ae591652f8545d4aa9042d37233caceqrb9ptu0ex.png"></u-icon>
			</view>
		</view>
		<view v-if="menuList.length" class="menu">
			<view class="menu_item">
				<ul>
					<li @click="handleSwitch(item,index)" v-for="(item,index) in menuList">
						<view :class="highLight===index?'avtive_li':''"> {{item}}</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isSeach:{
				type:Boolean
			},
			menuList:{
				type:Array,
				default:()=>[]
			},
			highLight: {
				type: Number,
				default: 0
			}
		},
		methods:{
			handleWechat(){
				wx.showToast({
					title:'公众号模块建设中',
					icon:'none'
					
				})
			},
			handlePhone(){
				uni.makePhoneCall({
					phoneNumber:'19357569679',
					success: (res) => {
					}
				})
			},
			handleSubmit(){
				this.$emit('searchHandle',this.keyword)
			},
			handleSwitch(item, index) {
				this.$emit('sendNum', index);
			},
		},
		data() {
			return {
				keyword: '',
				iptStyle: {
					backgroundColor: '#ffffff',
					width: '95%',
					'border-radius': '84rpx',
					height: '70rpx',
					border: '4rpx solid #fbada1',
					margin: '0 auto',
					paddingLeft:'40rpx'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/18/7624c0c5e06742319a354286bc09faa8dqftjq3zwz.png');
		background-repeat: no-repeat;
		background-size: cover;
		padding-bottom: 64rpx;
		// height: 360rpx;

		.top {
			display: flex;
			align-items: center;
			gap: 20rpx;
			padding: 30rpx;
			padding-bottom: 10rpx;

			.top_img {
				width: 100rpx;
			}

			// .title {
			// 	background: linear-gradient(to right, #ec613f, #e47361, #ef6d59, #da654a);
			// 	font-size: 2.6rem;
			// 	letter-spacing: 0.25rem;
			// 	text-shadow: 6rpx 0 10rpx 10rpx #fcbebb;
			// 	font-weight: bolder;
			// 	-webkit-background-clip: text;
			// 	-webkit-text-fill-color: transparent;
			// 	text-fill-color: transparent;
			// 	text-shadow: 12rpx 2rpx 5rpx #fbb3cc;
			// }
			.title{
				width: 500rpx;
				height: 62rpx;
				background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/21/3ffb71b55b374486a482f3791462c674vtmr4u0at9.png');
				background-repeat: no-repeat;
			}
		}

		.search_container {
			margin-top: 10rpx;

			.suffixStyle {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 78rpx;
				height: 70rpx;
				background-color: #f86853;
				margin-right: -16rpx;
				border-radius: 47%;
			}
		}
		
		.info{
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			font-size: 0.75rem;
			padding: 30rpx 0;
			color: #fca4a4;
			.info1{
				display: flex;
				gap:20rpx;
				
				
			}
			.info1 ::v-deep image{
				height: 12px !important;
			}
		}
		
		.menu {
			margin: 20rpx auto;
			width: 100%;
			border-radius: 20rpx;
		
			.menu_item {
				ul {
					display: flex;
					justify-content: center;
					align-items: center;
		
					li {
						text-align: center;
						position: relative;
						margin: 0 20rpx;
						padding: 10rpx 0;
		
						view {
							padding: 10rpx 0;
						}
		
					}
		
					.active_li {
						padding-top: 10rpx;
					}
		
					// .btn_line {
					// 	position: absolute;
					// 	bottom: 10rpx;
					// 	left: 0;
					// 	content: '';
					// 	width: 100%;
					// 	height: 6rpx;
					// }
		
					.avtive_li {
						color: #fb6853;
						border-bottom: 2px solid #fb6853;
					}
		
					.active_line {
						background-color: #fb6853;
					}
				}
			}
		}

	}
</style>